<template>
  <div class="container">
    <div class="select-container">
      <el-input
        size="small"
        style="width: 200px;"
        class="filter-item"
        placeholder="输入业务系统名称"
        clearable
        v-model="bussSystemName"
        prefix-icon="el-icon-search"
      >
      </el-input>
      <el-button size="small" type="success" @click="fetchData()" style="margin-right: 10px">查 询</el-button>
    </div>
    <div class="list-container">
      <div class="filter">
        <el-row :gutter="20">
          <el-col :span="10">
            <span style="line-height: 33px;padding-left:10px;">业务系统权限配置</span>
          </el-col>
          <el-col :span="14" style="text-align: right;">
            <span style="line-height: 33px;padding-left:10px; color:red">请先进行机构配置</span>

          </el-col>
        </el-row>
      </div>
      <div class="data-contant">
        <div>
          <el-table
            :key='tableKey'
            :data="list.records"
            v-loading="listLoading"
            element-loading-text="给我一点时间"
            size="small"
            stripe
            style="width: 100%;border:#eeeeee"
            highlight-current-row>
            <el-table-column
              align="center"
              type="index"
              width="80"
              label="编号"
            >
            </el-table-column>
            <el-table-column
              align="center"
              label="建设单位"
              prop="developmentUnitName"
            >
            </el-table-column>

            <el-table-column
              align="center"
              label="系统名称（中文）"
              prop="chName"
            >
            </el-table-column>
            <el-table-column
              align="center"
              label="系统名称（英文）"
              prop="znName"
            >
            </el-table-column>

            <el-table-column
              align="center"
              label="系统负责人"
              prop="systemLeader"
            >
            </el-table-column>

            <el-table-column
              align="center"
              label="状态" :formatter="fmtLength"
              prop="status"
            >
            </el-table-column>
            <el-table-column align="center" label="操 作" width="290px" class-name="small-padding fixed-width">
              <template slot-scope="scope">

                <el-button type="primary" size="small" @click="alloOrgs(scope.row)">机构配置</el-button>
                <el-button type="primary" size="small" @click="alloUsers(scope.row)">人员配置</el-button>
              </template>
            </el-table-column>
          </el-table>
          <div class="pagination-container">
            <el-pagination
              layout=" total, prev, pager, next"
              :page-size = "this.postList.rowBounds.limit"
              :total="this.list.count"
              @current-change="current_change"
            >
            </el-pagination>
          </div>
          <el-dialog
              title="机构配置"
              :visible.sync="dialogVisible"
              top="5vh"
              width="70%" @closed='closeOrgDialog2'>
              <el-row>
                <el-col :span="24">
                  <el-tree ref='tree'
                          :data="treeData"
                          show-checkbox
                          v-loading="loading"
                          style="height: 400px; overflow: scroll"
                          :props="defaultProps"
                          :expand-on-click-node='false'
                          :check-strictly="true"
                          node-key="id"
                          :default-checked-keys="treeDataSelect"
                          :highlight-current='true'
                          :default-expand-all='true'
                          @check="clickDeal"></el-tree>
                </el-col>

              </el-row>
              <span slot="footer" class="dialog-footer">
                <el-button size="small" @click="saveSelectedOrgs">保 存</el-button>
                <el-button size="small" @click="dialogVisible = false">关 闭</el-button>
              </span>
            </el-dialog>
            <el-dialog
              title="人员配置"
              :visible.sync="dialogVisible2"
              top="5vh"
              width="80%" @closed='closeUserConfigDialog2'>
              <el-row>
                <el-col :span="8">
                  <el-tree ref='tree2'
                          :data="treeData2"
                          v-loading="loading"
                          style="height: 400px; overflow: scroll"
                          :props="defaultProps"
                          :expand-on-click-node='false'
                          @node-click="handleNodeClick"
                          node-key="id"
                          :highlight-current='true'
                          :default-expand-all='true'></el-tree>
                </el-col>
                <el-col :span="16">
                  <el-button type="primary" size="small" @click="addUsers">增加人员</el-button>
                  <el-table
                    :data="userDataDemo"
                    size="small"
                    style="width: 100%;height: 310px; overflow: auto;border:#eeeeee">
                    <el-table-column
                      prop="loginName"
                      label="登录名"
                      width="180">
                    </el-table-column>
                    <el-table-column
                      prop="name"
                      label="用户名称"
                      width="180">
                    </el-table-column>
                    <el-table-column
                      prop="nameEn"
                      label="用户名称英文">
                    </el-table-column>
                    <el-table-column
                      prop="orgId"
                      label="用户机构ID">
                    </el-table-column>
                    <el-table-column
                      prop="code"
                      label="用户编码">
                    </el-table-column>
                    <el-table-column
                      label="操作"
                      width="100">
                      <template slot-scope="scope">
                        <el-button @click="deleteUser(scope.row)" type="text" size="small">删除</el-button>
                      </template>
                    </el-table-column>
                  </el-table>
                  <div class="pagination-container">
                    <el-pagination background @size-change="handleSizeChangeDemo"
                                  @current-change="handleCurrentChangeDemo"
                                  :page-sizes="[10,20,30, 50]"
                                  layout="total, sizes, prev, pager, next, jumper"
                                  :total="totalDemo">
                    </el-pagination>
                  </div>
                </el-col>
              </el-row>
              <span slot="footer" class="dialog-footer">
                <el-button size="small" @click="dialogVisible2 = false">关 闭</el-button>
              </span>
            </el-dialog>
            <el-dialog
              title="增加人员"
              :visible.sync="dialogVisible3"
              top="10vh"
              width="80%" @closed='closeUserAddDialog2'>
              <el-row>

                <el-col :span="24">
                  <el-input
                      size="small"
                      style="width: 200px;"
                      class="filter-item"
                      placeholder="输入人员名称"
                      clearable
                      v-model="userName"
                      prefix-icon="el-icon-search"
                    >
                    </el-input>
                    <el-button size="small" type="success" @click="queryNotSelectedUsers()" style="margin-right: 10px">查 询</el-button>
                  <el-table
                    :data="notSelectedUsers"
                    size="small"
                    style="width: 100%;height: 310px; overflow: auto;border:#eeeeee">
                    <el-table-column
                      prop="loginName"
                      label="登录名"
                      width="180">
                    </el-table-column>
                    <el-table-column
                      prop="name"
                      label="用户名称"
                      width="180">
                    </el-table-column>
                    <el-table-column
                      prop="nameEn"
                      label="用户名称英文">
                    </el-table-column>
                    <el-table-column
                      prop="orgId"
                      label="用户机构ID">
                    </el-table-column>
                    <el-table-column
                      prop="code"
                      label="用户编码">
                    </el-table-column>
                    <el-table-column
                      label="操作"
                      width="100">
                      <template slot-scope="scope">
                        <el-button @click="insertUser(scope.row)" type="text" size="small">插入</el-button>
                      </template>
                    </el-table-column>
                  </el-table>
                  <div class="pagination-container">
                    <el-pagination background @size-change="handleSizeChangeDemo1"
                                  @current-change="handleCurrentChangeDemo1"
                                  :page-sizes="[10,20,30, 50]"
                                  layout="total, sizes, prev, pager, next, jumper"
                                  :total="notSelectedTotal">
                    </el-pagination>
                  </div>
                </el-col>
              </el-row>
              <span slot="footer" class="dialog-footer">
                <el-button size="small" @click="dialogVisible3 = false">关 闭</el-button>
              </span>
            </el-dialog>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import '@/styles/newstyle.scss'
import {

  treeByParentId,
  treeById

} from '@/api/bussSystemManage/orgTreeExt'

import {

  systemOrgSelect,
  batchInsertItem,
  batchBySystemIdEx,
  getOrgTrees
} from '@/api/bussSystemManage/systemOrg'
import {

  systemManagerCompositeSelect
} from '@/api/bussSystemManage/systemManagerMgr'

import {

  orgTreeSelect
} from '@/api/service'

import {

  systemUserCompositeSelect,
  getNoSelectedUsers,
  systemUserInsert,
  systemUserDelete
} from '@/api/bussSystemManage/systemUser'
export default {
  data() {
    return {
      dialogVisible: false,
      treeData: [],
      treeDataSelect: [],
      loading: false,
      defaultProps: {
        children: 'children',
        label: 'name'
      },
      selectedSystemId: '',

      treeData2: [],
      dialogVisible2: false,
      selectedOrgId: '',

      dappendVisible: false,
      updateVisible: false,
      tableKey: 0,
      bussSystemName: '',

      postList: {
        condition: [{
          'property': 'status',
          'value': '2',
          'type': 'NE'
        }],
        sort: [{
          direction: 'DESC',
          property: 'editTime'
        }],
        rowBounds: {
          offset: 0,
          limit: 10
        }
      },
      list: {},

      userPostList: {
        condition: [],
        sort: [{
          direction: 'DESC',
          property: 'editTime'
        }],
        rowBounds: {
          offset: 0,
          limit: 10
        }
      },
      totalDemo: 0,
      userDataDemo: [],

      notSelectedPostList: {
        rowBounds: {
          offset: 0,
          limit: 10
        },
        condition: [
        ],
        fields: [
        ],
        sort: [{
          direction: 'ASC',
          property: 'orderNo'
        }]
      },
      notSelectedTotal: 0,
      notSelectedUsers: [],
      dialogVisible3: false,
      userName: '',

      listLoading: false,

      deletelist: {}
    }
  },
  // 画面刚进入method
  created() {
    this.fetchData()
  },
  updated() {
    // 给多选树设置默认值
    // alert(this.treeDataSelect)
    // this.$refs.tree.setCheckedKeys(this.treeDataSelect)
  },
  methods: {
    closeUserAddDialog2() {
      this.notSelectedUsers = []
      this.notSelectedTotal = 0
      this.userName = ''
    },
    closeUserConfigDialog2() {
      this.selectedSystemId = ''
      this.selectedOrgId = ''
      this.userDataDemo = []
      this.totalDemo = 0
    },
    closeOrgDialog2() {
      // alert("关闭了机构对话框2")
      this.selectedSystemId = ''
      this.treeDataSelect = []
      this.$refs.tree.setCheckedKeys(this.treeDataSelect)
    },

    insertUser(row) {
      var rowDemo =
        {
          userId: row.id,
          systemId: this.selectedSystemId

        }

      systemUserInsert(rowDemo).then(res => {
        // this.userDataDemo.splice(this.userDataDemo.indexOf(row), 1)
        getNoSelectedUsers(this.notSelectedPostList).then(response => {
          this.notSelectedUsers = response.data.data.records
          this.notSelectedTotal = response.data.data.count
        })
        systemUserCompositeSelect(this.userPostList).then(res => {
          this.userDataDemo = res.data.data.records
          this.totalDemo = res.data.data.count
        })

        this.$message({
          message: '插入成功',
          type: 'success'
        })
      }).catch((err) => {
        console.log(err)
      })
    },
    deleteUser(row) {
      var rowDemo =
        {

          id: row.id
        }

      systemUserDelete(rowDemo).then(res => {
        systemUserCompositeSelect(this.userPostList).then(res => {
          this.userDataDemo = res.data.data.records
          this.totalDemo = res.data.data.count
        })
        this.$message({
          message: '删除成功',
          type: 'success'
        })
      }).catch((err) => {
        console.log(err)
      })
    },
    queryNotSelectedUsers() {
      this.notSelectedPostList.condition.forEach(function(item, index, arr) {
        if (item.property == 'name') {
          arr.splice(index, 1)
        }
      })
      if (this.userName != '') {
        this.notSelectedPostList.condition.push({
          'property': 'name',
          'value': this.userName,
          'type': 'LIKE'
        })
      }

      getNoSelectedUsers(this.notSelectedPostList).then(response => {
        this.notSelectedUsers = response.data.data.records
        this.notSelectedTotal = response.data.data.count
      })
    },
    fetchData() {
      this.loading = true
      /*
      var con = this.getUser()
       if(con.length==1){
         this.postList.condition.push(con[0])
       }
      */
      this.postList.condition.forEach(function(item, index, arr) {
        if (item.property == 'chName') {
          arr.splice(index, 1)
        }
      })
      if (this.bussSystemName != '') {
        // alert(this.bussSystemName)
        this.postList.condition.push({
          'property': 'chName',
          'value': this.bussSystemName,
          'type': 'LIKE'
        })
      }
      this.postList.condition.forEach(function(item, index, arr) {
        if (item.property == 'userId') {
          arr.splice(index, 1)
        }
      })
      this.postList.condition.push({
        'property': 'userId',
        'value': this.$store.getters.userid,
        'type': 'EQ'
      })
      // alert(JSON.stringify( this.postList.condition))
      systemManagerCompositeSelect(this.postList).then(res => {
        this.list = res.data.data
        this.list.records = res.data.data.records
        this.loading = false
      }).catch((err) => {
        console.log(err)
      })
    },

    addUsers() {
      if (this.selectedOrgId == '')alert('请先选择机构')
      else {
        this.notSelectedPostList.condition = []
        this.notSelectedPostList.condition.push({
          'property': 'orgId',
          'value': this.selectedOrgId,
          'type': 'EQ'
        })

        this.notSelectedPostList.systemId = this.selectedSystemId

        getNoSelectedUsers(this.notSelectedPostList).then(response => {
          this.notSelectedUsers = response.data.data.records
          this.notSelectedTotal = response.data.data.count
          this.dialogVisible3 = true
        })
      }
    },

    formatDate(datestr) {
      var year = datestr.slice(0, 4)
      var month = datestr.slice(4, 6)
      var date = datestr.slice(6, 8)

      return year + '-' + month + '-' + date
    },
    fmtLength(row, column) {
      const arr = row[column.property]
      /* 这里的 if(arr === undefined)
         * 是根据自己的需求，决定arr长度为0时的判断条件
         * 可以和这个不同
         */
      if (arr == '2') {
        return '已删除'
      } else if (arr == '0') {
        return '有效'
      } else if (arr == '1') {
        return '禁用'
      }
    },
    alloUsers(row) {
      this.selectedSystemId = row.systemId

      getOrgTrees({ condition: [{
        'property': 'systemId',
        'value': row.systemId,
        'type': 'EQ'
      }] }).then(response => {
        this.treeData2 = response.data.data

        // alert(JSON.stringify(this.treeData2))

        if (this.treeData2.length == 0) alert('请先配置机构')
        else {
          this.dialogVisible2 = true
          // this.$refs.tree2.setCurrentKey(this.selectedOrgId)
        }
      })
      /*
      this.$router.push({
        name: 'configSystemManagers',
        params: {systemId: row.id,orgId: row.developmentUnit}
      })
      */
    },
    alloOrgs(row) {
      this.selectedSystemId = row.systemId

      this.dialogVisible = true
      treeByParentId({ parentId: '****', status: '0' }).then(response => {
        this.treeData = response.data.data
      })

      systemOrgSelect({ condition: [{
        'property': 'systemId',
        'value': row.systemId,
        'type': 'EQ'
      }] }).then(response => {
        this.treeDataSelect = []
        response.data.data.records.forEach((item, index) => {
          this.treeDataSelect.push(item.orgId)
        })
        this.$refs.tree.setCheckedKeys(this.treeDataSelect)
      })
    },
    handleNodeClick(data) {
      this.selectedOrgId = data.id
      //  alert(this.selectedOrgId)
      this.userPostList.condition = []
      this.userPostList.condition.push({
        'property': 'systemId',
        'value': this.selectedSystemId,
        'type': 'EQ'
      })
      this.userPostList.condition.push({
        'property': 'orgId',
        'value': this.selectedOrgId,
        'type': 'EQ'
      })
      systemUserCompositeSelect(this.userPostList).then(res => {
        this.userDataDemo = res.data.data.records
        this.totalDemo = res.data.data.count
      }).catch((err) => {
        console.log(err)
      })
      // alert(this.selectedOrgId)
      /*

      this.listQueryDemo.condition[0].value = data.id
      this.listQueryDemo.systemId = this.$route.params.systemId

      getNoSelectedManagers(this.listQueryDemo).then(response => {
        this.userDataDemo = response.data.data.records
        this.totalDemo = response.data.data.count
      })

      */
    },
    // 翻页器使用
    handleSizeChangeDemo(val) {
      this.userPostList.rowBounds.offset = 0
      this.userPostList.rowBounds.limit = val
      systemUserCompositeSelect(this.userPostList).then(response => {
        this.userDataDemo = response.data.data.records
        this.totalDemo = response.data.data.count
      })
    },
    // 翻页器使用
    handleCurrentChangeDemo(val) {
      this.userPostList.rowBounds.offset =
        this.userPostList.rowBounds.limit * (val - 1)

      systemUserCompositeSelect(this.userPostList).then(response => {
        this.userDataDemo = response.data.data.records
        this.totalDemo = response.data.data.count
      })
    },
    // 翻页器使用
    handleSizeChangeDemo1(val) {
      this.notSelectedPostList.rowBounds.offset = 0
      this.notSelectedPostList.rowBounds.limit = val
      getNoSelectedUsers(this.notSelectedPostList).then(response => {
        this.notSelectedUsers = response.data.data.records
        this.notSelectedTotal = response.data.data.count
      })
    },
    // 翻页器使用
    handleCurrentChangeDemo1(val) {
      this.notSelectedPostList.rowBounds.offset =
        this.notSelectedPostList.rowBounds.limit * (val - 1)

      getNoSelectedUsers(this.notSelectedPostList).then(response => {
        this.notSelectedUsers = response.data.data.records
        this.notSelectedTotal = response.data.data.count
      })
    },
    saveSelectedOrgs() {
      // alert(JSON.stringify(this.treeDataSelect))
      // alert(this.$refs.tree.getCheckedKeys())

      const checkedKeys = this.$refs.tree.getCheckedKeys()

      var diffElements = this.getDiff(this.treeDataSelect, checkedKeys)
      if (diffElements.length > 0) {
        systemUserCompositeSelect({ condition: [
          {
            'property': 'orgId',
            'value': diffElements,
            'type': 'ENUM'
          }
        ] }).then(res => {
          var totalDataRecords = res.data.data.records
          var totalData = res.data.data.count
          if (totalData > 0) {
            var orgIds = []
            totalDataRecords.forEach((item, index) => {
              orgIds.push(item.orgId)
            })

            orgTreeSelect({ condition: [
              {
                'property': 'id',
                'value': orgIds,
                'type': 'ENUM'
              }
            ] }).then(response => {
              var orgNames = []
              var myOrgIds = []
              response.data.data.records.forEach((item, index) => {
                orgNames.push(item.name)
                myOrgIds.push(item.id)
              })
              var orgNameStr = orgNames.join(',')
              this.$confirm('组织机构' + orgNameStr + '已经附带了人员，放弃选择后相应人员配置也会级联删除，确定不选吗?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
              }).then(() => {
                // this.doSaveSelectedOrgs()
                this.doSave(checkedKeys, myOrgIds)
              }).catch(() => {
                this.dialogVisible = false
                this.$message({
                  type: 'info',
                  message: '已取消修改'
                })
              })
            })
          } else {
            this.doSaveSelectedOrgs(checkedKeys)
          }
        })
      } else {
        this.doSaveSelectedOrgs(checkedKeys)
      }
    },

    doSaveSelectedOrgs(orgIds) {
      const insertArr = []
      for (const temp of orgIds) {
        const input = {}
        input.orgId = temp
        insertArr.push(input)
      }

      var search = {
        insertArr: insertArr,
        systemId: this.selectedSystemId
      }
      batchInsertItem(search).then(response => {
        this.$notify({
          title: '成功',
          message: '保存成功',
          type: 'success',
          duration: 2000
        })
        this.dialogVisible = false
      })
    },
    doSave(orgIds, unSelectedOrgIds) {
      const insertArr = []
      for (const temp of orgIds) {
        const input = {}
        input.orgId = temp
        insertArr.push(input)
      }

      var search = {
        insertArr: insertArr,
        systemId: this.selectedSystemId,
        unSelectedOrgIds: unSelectedOrgIds
      }
      batchBySystemIdEx(search).then(response => {
        this.$notify({
          title: '成功',
          message: '保存成功',
          type: 'success',
          duration: 2000
        })
        this.dialogVisible = false
      })
    },

    getDiff(oldArr, newArr) {
      var len = oldArr.length
      var arr = []

      while (len--) {
        if (newArr.indexOf(oldArr[len]) < 0) {
          arr.push(oldArr[len])
        }
      }

      return arr
    },

    current_change(currentPage) { // 通过分页获取数据
      const page = currentPage - 1
      this.postList.rowBounds.offset = page * 10
      this.fetchData()
    },
    clickDeal(currentObj, treeStatus) {
      this.clickCheck(currentObj, treeStatus, this.$refs.tree)
    },

    /**
             * 树形菜单复选框父子节点不关联实现父子节点联动回显
             *
             * @see selectedParent - 处理父节点为选中
             * @see uniteChildSame - 处理子节点为相同的勾选状态
             * @see removeParent   - 子节点全没选中取消父级的选中状态
             *
             * @param {Object} currentObj - 当前勾选节点的对象
             * @param {Object} treeStatus - 树目前的选中状态对象
             * @param {Object} ref - this.$refs.xxx
             **/
    clickCheck(currentObj, treeStatus, ref) {
      // 用于：父子节点严格互不关联时，父节点勾选变化时通知子节点同步变化，实现单向关联。
      // alert(JSON.stringify(treeStatus.checkedKeys))
      let selected = treeStatus.checkedKeys.indexOf(currentObj.id) // -1未选中

      // 选中
      if (selected !== -1) {
        // 子节点只要被选中父节点就被选中
        this.selectedParent(currentObj, ref)
        // 统一处理子节点为相同的勾选状态
        this.uniteChildSame(currentObj, true, ref)
      } else {
        // 取消子节点的选中状态触发
        // alert(JSON.stringify(currentObj.parent_id))
        if (currentObj.parent_id !== '****') {
          this.removeParent(currentObj, ref)
        }

        // 未选中 处理子节点全部未选中
        if (currentObj.children.length !== 0) {
          this.uniteChildSame(currentObj, false, ref)
        }
      }
    },

    /**   统一处理子节点为相同的勾选状态  **/
    uniteChildSame(treeList, isSelected, ref) {
      let treeListData = treeList.children
      let len = treeListData.length

      ref.setChecked(treeList.id, isSelected)

      for (let i = 0; i < len; i++) {
        this.uniteChildSame(treeListData[i], isSelected, ref)
      }
    },

    /**    统一处理父节点为选中    **/
    selectedParent(currentObj, ref) {
      let currentNode = ref.getNode(currentObj)
      if (currentNode.parent.key !== undefined) {
        ref.setChecked(currentNode.parent, true)
        return this.selectedParent(currentNode.parent, ref)
      }
    },

    /**    子节点全没选中取消父级的选中状态   **/
    removeParent(currentObj, ref) {
      let a = 0
      let b = 0
      let currentNode = ref.getNode(currentObj)
      if (currentNode.parent !== null) {
        if (currentNode.parent.key !== undefined) {
          ref.setChecked(currentNode.parent, true) // 根节点
          this.removeParent(currentNode.parent, ref) // 递归判断子节点
        }
      }

      // 不为0表示为父节点
      if (currentNode.childNodes.length !== 0) {
        // 循环判断父节点下的子节点
        for (let i = 0; i < currentNode.childNodes.length; i++) {
          // 判断父节点下的子节点是否全为false
          if (currentNode.childNodes[i].checked === false) {
            ++a

            // a === currentNode.childNodes.length 表明子节点全为false
            if (a === currentNode.childNodes.length) {
              // 等于 undefined 跳过,不等于继续执行
              if (currentNode.childNodes[i].parent.key !== undefined) {
                ref.setChecked(currentNode.childNodes[i].parent, false) // 父元素设置为false
                // 循环上级父节点下的子节点
                for (let i = 0; i < currentNode.parent.childNodes.length; i++) {
                  // 判断父节点下的子节点是否全为false
                  if (currentNode.parent.childNodes[i].checked === false) {
                    ++b

                    // b === currentNode.parent.childNodes.length 表明子节点全为false
                    if (b === currentNode.parent.childNodes.length) {
                      ref.setChecked(currentNode.parent.key, false) // 父元素设置为false
                      return this.removeParent(currentNode.parent, ref) // 继续递归循环判断
                    }
                  }
                }
              }
            }
          }
        }
      }
    }

    /*
    getUser(){
      var flag=0
      var conditionEx = []
      for (let i = 0; i < this.$store.getters.roles.length; i++) {
          if (this.$store.getters.roles[i].code == "SYS_ADMIN") {
            //alert(this.$store.getters.roles[i].code)
            flag=1
            break
          }
      }
      if(flag==0){
        conditionEx.push({
          'property': 'addUser',
          'value': this.$store.getters.userid,
          'type': 'EQ'
        });
      }
      return conditionEx
    }
    */
  }
}
</script>

<style scoped>
  .container{
    color: #3b96f3;
    background: #fff;
    padding: 20px;
    height: 100%;
    overflow-y: auto;
  }
  .select-container{
    padding: 10px 10px;
    margin-bottom: 10px;
    border-radius: 4px;
    border: 1px solid #eeeeee;
  }
  .list-container{
    margin-top:30px;
    padding:0 10px 10px 10px;
    border:1px solid#eeeeee;
    border-radius: 4px;
  }
  .data-contant{
    background-color: rgba(0,0,0,.035);
    padding: 30px 10px 20px;
  }
  .data-detail{
    font-size: 14px;
    padding:20px 0;
    text-align: center;
  }
  .data-title{
    font-size: 14px;
    padding:10px 0;
    text-align: center;
  }
  .data-title div{
    font-size: 14px;
    padding:5px 0;
  }
  .filter{
    padding: 10px 5px;
    border-bottom: 2px solid#eeeeee;
  }
  .list-container{
  }
  .bold{
    font-weight: bold;
  }
</style>
